<script setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { openPaymentModal, checkAccessPermission, formatPrice, getRecommendedPlan, isMembershipExpiringSoon } from '../utils/paymentUtils.js'

const router = useRouter()

// 模拟用户登录状态和会员等级
const userInfo = ref({
  username: '',
  level: '游客', // 游客、学子会员、传人会员、大师会员
  isLoggedIn: false,
  joinDate: '',
  expiresDate: '',
  points: 0
})

// 获取Vue应用实例，用于调用全局方法
const app = getCurrentInstance()

// 会员套餐数据
const membershipPlans = [
  {
    id: 1,
    name: '学子会员',
    price: 29,
    period: '月',
    originalPrice: 59,
    features: [
      { name: '基础观看', description: '480P完整剧目观看' },
      { name: '角色解析', description: '基础角色解析内容' },
      { name: '免费点播', description: '每月2部免费点播' },
      { name: '购票优惠', description: '演出票95折优惠' },
      { name: '提前购票', description: '演出提前购票权' },
      { name: '积分奖励', description: '消费1元积1分' }
    ],
    highlights: [
      '首月特惠¥9.9',
      '适合入门爱好者',
      '性价比之选'
    ],
    badge: '推荐',
    icon: '📚',
    description: '适合入门者，体验基础皮影艺术内容'
  },
  {
    id: 2,
    name: '传人会员',
    price: 69,
    period: '月',
    originalPrice: 129,
    features: [
      { name: '高清画质', description: '1080P高清剧目观看' },
      { name: '深度解析', description: '详细制作解析内容' },
      { name: '无限点播', description: '所有内容无限制点播' },
      { name: '独家花絮', description: '独家幕后花絮内容' },
      { name: '购票优惠', description: '演出票9折优惠' },
      { name: '座位优先', description: '最佳座位预留权' },
      { name: '后台参观', description: '线下演出后台参观' },
      { name: '积分奖励', description: '消费1元积1.5分' }
    ],
    highlights: [
      '季卡特惠¥189',
      '专业爱好者首选',
      '完整体验皮影艺术'
    ],
    badge: '热门',
    icon: '🎭',
    recommended: true,
    description: '完整体验皮影艺术魅力，性价比之选'
  },
  {
    id: 3,
    name: '大师会员',
    price: 999,
    period: '年',
    originalPrice: 1999,
    features: [
      { name: '超清体验', description: '4K超清画质观看' },
      { name: '大师解说', description: '大师解说特别版本' },
      { name: '创作资料', description: '创作手稿下载权限' },
      { name: '独家内容', description: '所有独家内容免费' },
      { name: '活动优先', description: '线下活动优先权' },
      { name: '购票优惠', description: '演出票85折优惠' },
      { name: '专属客服', description: '24小时专属客服' },
      { name: '积分奖励', description: '消费1元积2分' },
      { name: '生日礼遇', description: '生日月额外礼遇' }
    ],
    highlights: [
      '年度超值选择',
      '艺术收藏必备',
      '尊贵身份象征'
    ],
    badge: '尊享',
    icon: '👑',
    description: '顶级体验，尊享所有特权与独家内容'
  }
]

// 会员权益对比数据
const membershipComparison = [
  {
    feature: '观看画质',
    visitor: '2分钟标清试看',
    student: '480P标清',
    inheritor: '1080P高清',
    master: '4K超清'
  },
  {
    feature: '剧目内容',
    visitor: '部分内容预览',
    student: '基础内容完整观看',
    inheritor: '全部内容完整观看',
    master: '全部内容完整观看'
  },
  {
    feature: '独家内容',
    visitor: '✗',
    student: '✗',
    inheritor: '✓',
    master: '✓ 包含大师版'
  },
  {
    feature: '幕后花絮',
    visitor: '✗',
    student: '✗',
    inheritor: '✓',
    master: '✓ 完整花絮'
  },
  {
    feature: '创作手稿',
    visitor: '✗',
    student: '✗',
    inheritor: '✗',
    master: '✓ 可下载'
  },
  {
    feature: '演出购票折扣',
    visitor: '无',
    student: '95折',
    inheritor: '9折',
    master: '85折'
  },
  {
    feature: '提前购票权',
    visitor: '✗',
    student: '✓',
    inheritor: '✓',
    master: '✓ 提前48小时'
  },
  {
    feature: '最佳座位预留',
    visitor: '✗',
    student: '✗',
    inheritor: '✓',
    master: '✓'
  },
  {
    feature: '后台参观体验',
    visitor: '✗',
    student: '✗',
    inheritor: '✓',
    master: '✓ 优先安排'
  },
  {
    feature: '专属客服',
    visitor: '✗',
    student: '✗',
    inheritor: '✗',
    master: '✓ 24小时'
  }
]

// 加载用户信息
onMounted(() => {
  const loginStatus = localStorage.getItem('isLoggedIn') === 'true'
  userInfo.value.isLoggedIn = loginStatus
  
  if (loginStatus) {
    const storedUserInfo = localStorage.getItem('userInfo')
    if (storedUserInfo) {
      const parsed = JSON.parse(storedUserInfo)
      userInfo.value.username = parsed.username || parsed.phone || ''
      userInfo.value.level = parsed.level || '普通会员'
      userInfo.value.joinDate = parsed.joinDate || '2024-01-01'
      userInfo.value.expiresDate = parsed.expiresDate || '2024-12-31'
      userInfo.value.points = parsed.points || 0
    }
  }
})

// 处理会员升级/购买
const handleSubscribe = (plan) => {
  if (!userInfo.value.isLoggedIn) {
    router.push('/login')
    return
  }
  
  // 显示购买确认
  if (confirm(`确认开通「${plan.name}」，价格：${formatPrice(plan.price)}/${plan.period}？`)) {
    // 打开支付模态框
    openPaymentModal(app?.proxy, {
      id: `member_${plan.id}`,
      name: plan.name,
      price: plan.price,
      type: 'membership',
      details: `${plan.description} - ${plan.period}会员`
    })
  }
}

// 计算用户当前等级对应的计划
const currentPlan = computed(() => {
  switch (userInfo.value.level) {
    case '学子会员':
      return membershipPlans[0]
    case '传人会员':
      return membershipPlans[1]
    case '大师会员':
      return membershipPlans[2]
    default:
      return null
  }
})

// 获取等级对应的中文名称
const getLevelName = (level) => {
  switch (level) {
    case 'visitor': return '游客'
    case 'student': return '学子会员'
    case 'inheritor': return '传人会员'
    case 'master': return '大师会员'
    default: return level
  }
}

// 模拟生成优惠码
const generatePromoCode = () => {
  return 'SHADOW' + Math.floor(Math.random() * 10000)
}

// 推荐的计划
const recommendedPlan = computed(() => {
  return getRecommendedPlan() || membershipPlans.find(plan => plan.recommended) || membershipPlans[1]
})

// 检查会员是否即将到期
const isExpiringSoon = computed(() => {
  return isMembershipExpiringSoon()
})

// 获取会员等级对应的CSS类
const getLevelClass = (level) => {
  switch (level) {
    case '学子会员': return 'level-student'
    case '传人会员': return 'level-inheritor'
    case '大师会员': return 'level-master'
    default: return 'level-visitor'
  }
}
</script>

<template>
  <div class="membership-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">会员中心</h1>
      <p class="page-subtitle">尊享皮影艺术，品味文化瑰宝</p>
    </div>

    <!-- 用户会员状态卡片 -->
    <div class="user-status-card container">
      <div class="status-header">
        <div class="user-info">
          <div class="user-avatar">
            {{ userInfo.username ? userInfo.username[0].toUpperCase() : '游客' }}
          </div>
          <div class="user-details">
            <h3 class="user-name">
              {{ userInfo.username || '游客用户' }}
            </h3>
            <div class="user-level-badge" :class="getLevelClass(userInfo.level)">
              {{ userInfo.level }}
            </div>
          </div>
        </div>
        <div v-if="userInfo.isLoggedIn" class="status-actions">
          <button class="btn btn-outline" @click="router.push('/account')">
            管理账户
          </button>
        </div>
      </div>
      
      <div v-if="userInfo.isLoggedIn && currentPlan" class="membership-details">
        <div class="detail-item">
          <span class="detail-label">会员有效期</span>
          <span class="detail-value">{{ userInfo.joinDate }} - {{ userInfo.expiresDate }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">当前积分</span>
          <span class="detail-value">{{ userInfo.points }} 积分</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">会员等级</span>
          <div class="level-progress">
            <div class="progress-bar">
              <div 
                class="progress-fill" 
                :style="{ 
                  width: userInfo.level === '大师会员' ? '100%' : 
                         userInfo.level === '传人会员' ? '66%' : '33%' 
                }"
              ></div>
            </div>
            <div class="level-steps">
              <div class="step" :class="{ active: userInfo.level !== '游客' && userInfo.level !== '普通会员' }">
                学子
              </div>
              <div class="step" :class="{ active: userInfo.level === '传人会员' || userInfo.level === '大师会员' }">
                传人
              </div>
              <div class="step" :class="{ active: userInfo.level === '大师会员' }">
                大师
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="!userInfo.isLoggedIn" class="login-prompt">
        <p>登录后可查看会员状态和权益</p>
        <button class="btn btn-primary" @click="router.push('/login')">
          立即登录
        </button>
      </div>
    </div>

    <!-- 会员套餐选择 -->
    <div class="membership-plans-section container">
      <div class="section-header">
        <h2 class="section-title">🎯 选择适合您的会员套餐</h2>
        <p class="section-subtitle">灵活选择，享受精彩</p>
      </div>
      
      <div class="membership-plans">
        <div 
          v-for="plan in membershipPlans" 
          :key="plan.id" 
          class="plan-card"
          :class="{
            'recommended': plan.recommended,
            'current-plan': currentPlan && currentPlan.id === plan.id
          }"
        >
          <!-- 套餐徽章 -->
          <div v-if="plan.badge" class="plan-badge" :class="`badge-${plan.id}`">
            {{ plan.badge }}
          </div>
          
          <!-- 套餐头部 -->
          <div class="plan-header">
            <div class="plan-icon">{{ plan.icon }}</div>
            <h3 class="plan-name">{{ plan.name }}</h3>
            <div class="plan-price">
              <span class="price">¥{{ plan.price }}</span>
              <span class="period">/{{ plan.period }}</span>
            </div>
            <div class="original-price">原价 ¥{{ plan.originalPrice }}</div>
          </div>
          
          <!-- 套餐亮点 -->
          <div class="plan-highlights">
            <div 
              v-for="(highlight, index) in plan.highlights" 
              :key="index" 
              class="highlight-item"
            >
              <span class="highlight-icon">✨</span>
              <span class="highlight-text">{{ highlight }}</span>
            </div>
          </div>
          
          <!-- 套餐权益 -->
          <div class="plan-features">
            <div 
              v-for="(feature, index) in plan.features" 
              :key="index" 
              class="feature-item"
            >
              <span class="feature-icon">✓</span>
              <div class="feature-info">
                <div class="feature-name">{{ feature.name }}</div>
                <div class="feature-desc">{{ feature.description }}</div>
              </div>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="plan-actions">
            <button 
              v-if="!currentPlan || currentPlan.id !== plan.id"
              class="btn btn-primary"
              @click="handleSubscribe(plan)"
            >
              立即开通
            </button>
            <button 
              v-else
              class="btn btn-outline current-btn"
              disabled
            >
              当前套餐
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 会员权益对比 -->
    <div class="comparison-section container">
      <div class="section-header">
        <h2 class="section-title">📊 会员权益对比</h2>
        <p class="section-subtitle">清晰了解各级会员权益差异</p>
      </div>
      
      <div class="comparison-table">
        <table>
          <thead>
            <tr>
              <th>权益项目</th>
              <th class="level-visitor">游客</th>
              <th class="level-student">学子会员</th>
              <th class="level-inheritor">传人会员</th>
              <th class="level-master">大师会员</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in membershipComparison" :key="index">
              <td class="feature-name">{{ item.feature }}</td>
              <td class="level-visitor">{{ item.visitor }}</td>
              <td class="level-student">{{ item.student }}</td>
              <td class="level-inheritor">{{ item.inheritor }}</td>
              <td class="level-master">{{ item.master }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="faq-section container">
      <div class="section-header">
        <h2 class="section-title">❓ 常见问题</h2>
        <p class="section-subtitle">解答您的疑惑</p>
      </div>
      
      <div class="faq-list">
        <div class="faq-item">
          <div class="faq-question">如何升级会员等级？</div>
          <div class="faq-answer">
            您可以在会员中心直接选择更高等级的会员套餐进行购买，系统会自动为您升级。升级后，新的权益将立即生效。
          </div>
        </div>
        <div class="faq-item">
          <div class="faq-question">会员到期后会自动续费吗？</div>
          <div class="faq-answer">
            系统默认不会自动续费，到期前我们会通过短信和邮件提醒您。您可以在账户设置中开启自动续费功能。
          </div>
        </div>
        <div class="faq-item">
          <div class="faq-question">购买后可以退款吗？</div>
          <div class="faq-answer">
            会员服务购买后7天内，若未使用任何会员权益，可申请全额退款。7天后或已使用权益的情况下，暂不支持退款。
          </div>
        </div>
        <div class="faq-item">
          <div class="faq-question">积分如何使用？</div>
          <div class="faq-answer">
            积分可用于抵扣会员费用、兑换演出门票或周边商品。100积分可抵扣1元，详情请查看积分商城。
          </div>
        </div>
      </div>
    </div>

    <!-- 优惠活动 -->
    <div class="promotion-section container">
      <div class="promotion-card">
        <div class="promotion-header">
          <h3 class="promotion-title">🎁 限时优惠活动</h3>
        </div>
        <div class="promotion-content">
          <div class="promotion-offers">
            <div class="promo-item">
              <div class="promo-icon">🔥</div>
              <div class="promo-info">
                <div class="promo-title">首月特惠</div>
                <div class="promo-desc">学子会员仅需¥9.9</div>
              </div>
            </div>
            <div class="promo-item">
              <div class="promo-icon">🎯</div>
              <div class="promo-info">
                <div class="promo-title">限时优惠券</div>
                <div class="promo-desc">{{ generatePromoCode() }} 享9折</div>
              </div>
            </div>
            <div class="promo-item">
              <div class="promo-icon">🎫</div>
              <div class="promo-info">
                <div class="promo-title">邀请好友</div>
                <div class="promo-desc">成功邀请得¥10奖励</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 页面容器 */
.membership-container {
  min-height: 100vh;
  background-color: var(--color-background);
}

/* 页面头部 */
.page-header {
  background-color: var(--color-secondary);
  color: white;
  padding: 3rem 0;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem 0;
  font-weight: bold;
}

.page-subtitle {
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
}

/* 用户状态卡片 */
.user-status-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin-top: -3rem;
  position: relative;
  z-index: 10;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
}

.user-details h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  color: var(--color-secondary);
}

.user-level-badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.level-visitor {
  background-color: #e9ecef;
  color: #495057;
}

.level-student {
  background-color: #d1ecf1;
  color: #0c5460;
}

.level-inheritor {
  background-color: #d4edda;
  color: #155724;
}

.level-master {
  background-color: #fff3cd;
  color: #856404;
}

.membership-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-label {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.detail-value {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-text);
}

.level-progress {
  margin-top: 0.5rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--color-background-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.level-steps {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.level-steps .step.active {
  font-weight: bold;
  color: var(--color-primary);
}

.login-prompt {
  text-align: center;
  padding: 2rem 0;
}

.login-prompt p {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  color: var(--color-text-light);
}

/* 通用区块样式 */
.section {
  padding: 4rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2rem;
  margin: 0 0 0.5rem 0;
  color: var(--color-secondary);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* 会员套餐 */
.membership-plans-section {
  padding: 4rem 0;
}

.membership-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.plan-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.plan-card.recommended {
  border: 2px solid var(--color-primary);
  transform: translateY(-10px);
}

.plan-card.current-plan {
  border: 2px solid var(--color-success);
}

.plan-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem 1.5rem;
  font-weight: bold;
  color: white;
}

.badge-1 {
  background-color: var(--color-info);
}

.badge-2 {
  background-color: var(--color-primary);
}

.badge-3 {
  background-color: var(--color-warning);
}

.plan-header {
  padding: 2rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.plan-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.plan-name {
  font-size: 1.8rem;
  margin: 0 0 1rem 0;
  color: var(--color-secondary);
}

.plan-price {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--color-error);
  margin-bottom: 0.5rem;
}

.plan-price .period {
  font-size: 1rem;
  color: var(--color-text-light);
}

.original-price {
  font-size: 0.9rem;
  color: var(--color-text-light);
  text-decoration: line-through;
}

.plan-highlights {
  padding: 1.5rem;
  background-color: var(--color-background-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-secondary);
  font-weight: bold;
}

.plan-features {
  padding: 1.5rem;
  flex: 1;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.feature-item:last-child {
  margin-bottom: 0;
}

.feature-icon {
  color: var(--color-success);
  font-weight: bold;
  margin-top: 0.2rem;
}

.feature-info {
  flex: 1;
}

.feature-name {
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}

.feature-desc {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.plan-actions {
  padding: 1.5rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.current-btn {
  background-color: var(--color-success) !important;
  color: white !important;
  cursor: default;
}

/* 会员权益对比 */
.comparison-section {
  padding: 4rem 0;
  background-color: var(--color-background-soft);
}

.comparison-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 1.2rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

th {
  background-color: var(--color-background-soft);
  font-weight: bold;
  color: var(--color-text);
}

td {
  color: var(--color-text);
}

tr:last-child td {
  border-bottom: none;
}

.feature-name {
  text-align: left;
  font-weight: bold;
}

/* 常见问题 */
.faq-section {
  padding: 4rem 0;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.5rem;
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.faq-question {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
  color: var(--color-secondary);
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-answer {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* 优惠活动 */
.promotion-section {
  padding: 4rem 0;
}

.promotion-card {
  background-color: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.promotion-header {
  text-align: center;
  margin-bottom: 2rem;
}

.promotion-title {
  font-size: 2rem;
  margin: 0;
}

.promotion-content {
  text-align: center;
}

.promotion-offers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-bottom: 2rem;
}

.promo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.promo-icon {
  font-size: 2.5rem;
}

.promo-info .promo-title {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}

.promo-info .promo-desc {
  opacity: 0.9;
  font-size: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .status-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .user-info {
    justify-content: center;
  }
  
  .membership-details {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .membership-plans {
    grid-template-columns: 1fr;
  }
  
  .plan-card.recommended {
    transform: translateY(0);
  }
  
  .promotion-offers {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  th, td {
    padding: 0.8rem;
    font-size: 0.9rem;
  }
}
</style>